<template>
  <section class="center">
    <article>
      <h3 class="header">
        页面未找到</h3>
      <p class="error">
        ERROR</p>
    </article>
    <article>
      <img src="vovg1x.png" alt="Funny Face">
    </article>
    <article>
      <p>
        Lost? Maybe I can help.</p>
    </article>

    <article>
      <h3>
        My Suggestions.</h3>
      <ul>
        <li><a href="/shouye">首页</a></li>
        <li><a href="/login">登录</a></li>
      </ul>
    </article>
  </section>
</template>

<script>
  export default {
    name: '404'
  }
</script>

<style scoped>
  body
  {
    background-color: #0A7189;
    color: #fff;
    font: 100% "Lato" , sans-serif;
    font-size: 1.8rem;
    font-weight: 300;
  }

  a
  {
    color: #75C6D9;
    text-decoration: none;
  }

  h3
  {
    margin-bottom: 1%;
  }

  ul
  {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 50px;
  }

  li a:hover
  {
    color: #fff;
  }

  .center
  {
    text-align: center;
  }

  /* Search Bar Styling */
  form > *
  {
    vertical-align: middle;
  }

  .srchBtn
  {
    border: 0;
    border-radius: 7px;
    padding: 0 17px;
    background: #e74c3c;
    width: 99px;
    border-bottom: 5px solid #c0392b;
    color: #fff;
    height: 65px;
    font-size: 1.5rem;
    cursor: pointer;
  }

  .srchBtn:active
  {
    border-bottom: 0px solid #c0392b;
  }

  .srchFld
  {
    border: 0;
    border-radius: 7px;
    padding: 0 17px;
    max-width: 404px;
    width: 40%;
    border-bottom: 5px solid #bdc3c7;
    height: 60px;
    color: #7f8c8d;
    font-size: 19px;
  }

  .srchFld:focus
  {
    outline-color: rgba(255, 255, 255, 0);
  }

  /* 404 Styling */
  .header
  {
    font-size: 8rem;
    font-weight: 700;
    margin: 2% 0 2% 0;
    text-shadow: 0px 3px 0px #7f8c8d;
  }

  /* Error Styling */
  .error
  {
    margin: -70px 0 2% 0;
    font-size: 7.4rem;
    text-shadow: 0px 3px 0px #7f8c8d;
    font-weight: 100;
  }
</style>
